<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://localhost:8082/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="../nsv.js"></script>
</head>
<body onload="initPlugin()">
    <div id="show"></div>
    <form id="myform" enctype="multipart/form-data" method="post" action="/image/upload.action">
        <input type="text" id="imgData" name="imgData" >

        <input type="submit" id="save" name="save" value="保存图片" >
    </form>
    State:
    <label id="label_state"></label>
    <br><br>
    <div style="width: 615px;height: 272px;border:solid 1px #1b65ee;background-color: chocolate">
        <img id="img_sign_result" src=""/>
    </div>
    <br>
    <input type="button" value="beginSign" onclick="beginSign()"/>

    <input type="button" value="endSign" onclick="endSign()"/>
    <br><br>
<!--    <img src="">-->
<script>
    /*function showImg() {
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function (e) {
            //获取图片的base64字符串
            var imgBase64Data = e.target.result;
            alert(imgBase64Data);
            //移除原先的图片
            $("img").remove();
            //显示选择的图片
            $("#show").append("<img src=\""+imgBase64Data+"\"/>");
            //截取字符串
            var head = imgBase64Data.indexOf("4")+2;
            imgBase64Data = imgBase64Data.substring(head,imgBase64Data.length-head);
            //将字符串中的'+'替换为'%2B'防止传过去变为空格
            //var reg = new RegExp("\\+","g");
            //imgBase64Data = imgBase64Data.replace(reg,"%2B");
            //存储参数到隐藏表单域
            $("#imgData").val(imgBase64Data);
        }
    }*/

    function saves() {
        var data = $("#imgData").val();
        alert(data);
        $("#myform").attr("action","localhost:8082/image/upload.action?imgData="+data);

        $("#myform").submit();

    }






    function debugPrint(text) {
        text = "DebugPrint[" + text + "]";
        console.log(text);
    }

    var plugin = null;
    function initPlugin() {
        if (!!plugin) {
            plugin.DestroyPlugin();
        }
        plugin = new PluginNSV();
        plugin.InitPlugin(function (state) {
            if (state === 1) {
                //set pen size
                plugin.setPenSizeRange(1,5,null);
                //set pen color
                plugin.setPenColor(0,0,0,null);

                document.getElementById("label_state").innerText = "connect service succeeded.";
                debugPrint("initialize plugin OK.");
            } else {
                document.getElementById("label_state").innerText = "connect failed.";
                debugPrint("initialize plugin fails.");
            }
        });

        /*confirm event*/
        plugin.onConfirm = function () {
            saveSignToBase64();
            endSign();
        };
        /*clear event*/
        plugin.onClear = function () {
            clearSign();
        };
        /*cancel event*/
        plugin.onCancel = function () {
            endSign();
        };
    }

    function clearSign() {
        if (!!plugin) {
            //Reset the signature panel.
            plugin.clearSign(function (state, args) {
                if (state) {

                } else {
                    debugPrint("clearSign error,description:" + args[0]);
                }
            });
        }
        //Reset the image.
        document.getElementById('img_sign_result').src = '';
    }

    function beginSign() {

        if (!!plugin) {
            plugin.beginSign(function (state, args) {
                if (state) {
                    //The function call successful.
                    //Play the wizard sound, etc.
                    plugin.setDisplayMapMode(1,state);
                    debugPrint("beginSign OK");
                }
                else {
                    debugPrint("beginSign error,description:" + args[0]);
                }
            });
        }
        //Reset the image.
        document.getElementById('img_sign_result').src='';
    }

    function endSign() {
        if (!!plugin) {
            /* plugin.endSign(null);*/
            plugin.endSign(function (state, args) {
                if (state) {
                    //The function call successful.
                    debugPrint("endSign OK");
                }
                else {
                    debugPrint("endSign error,description:" + args[0]);
                }
            });
        }
    }

    function saveSignToBase64() {
        if (!!plugin) {
            //Get the plugin's signature image data.
            plugin.saveSignToBase64(/*615, 272*/40,40, function (state, args) {
                if (state) {
                    var img_base64_data = args[0];
                    //Show the signature image.
                    var img_base64 = "data:image/png;base64,"+img_base64_data;
                    debugger
                    $("#imgData").val(img_base64_data);
                    document.getElementById("img_sign_result").src = img_base64;
                    debugPrint("saveSignToBase64 OK");
                    //Submit the signature base64 string to the server
                    //...
                }else {
                    debugPrint("saveSignToBase64 error,description:" + args[0]);
                }
            });
        }
    }


</script>
</body>
</html>
